<!-- 功能  定时关机 - 添加关机任务 弹窗 | 作者：menghao.yan | 邮箱：yxs2615@163.com | 时间：2023年08月24日 14:23:00 -->
<template>
  <!-- 弹出框 -->
  <a-modal v-model:open="visible" title="添加关机任务" width="600px" class="y-modal" okText="创建" @ok="onSubmit" @cancel="onCancel">
    <a-form :label-col="{ span:6 }" :wrapper-col="{span: 14}">
      <a-form-item>
        请设置要关机的时间或使用相对时间
      </a-form-item>
      <a-form-item label="控制器" v-bind="validateInfos.controller">
        <a-select v-model:value="modelRef.controller" placeholder="请选择控制器">
          <a-select-option value="controller-1">controller-1</a-select-option>
          <a-select-option value="controller-2">controller-2</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="设置时间" v-bind="validateInfos.time" v-if="!modelRef.xiangDui">
        <a-date-picker show-time v-model:value="modelRef.time" :disabled-date="disabledDate" placeholder="请选择时间" style="width:100%" />
      </a-form-item>

      <a-form-item label="系统将在...后关机" v-bind="validateInfos.xiangDuiTime" v-if="modelRef.xiangDui">
        <a-row :gutter="12">
          <a-col flex="auto">
            <a-input v-model:value="modelRef.xiangDuiTime" placeholder="请输入相对时间" />
          </a-col>
          <a-col flex="20px">
            <a-select v-model:value="modelRef.xiangDuiTimeDanWei" placeholder="请选择相对时间单位">
              <a-select-option value="分">分</a-select-option>
              <a-select-option value="时">时</a-select-option>
              <a-select-option value="日">日</a-select-option>
              <a-select-option value="周">周</a-select-option>
            </a-select>
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item label="相对时间">
        <a-checkbox v-model:checked="modelRef.xiangDui"></a-checkbox>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import dayjs from 'dayjs'
const range = (start, end) => {
  const result = []
  for (let i = start; i < end; i++) {
    result.push(i)
  }
  return result
}
const disabledDate = current => {
  // Can not select days before today and today
  return current && current < dayjs().endOf('day')
}

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const { visible } = toRefs(props)

// 定义组件的事件
const emits = defineEmits(['update:visible'])

import { Form } from 'ant-design-vue'

const useForm = Form.useForm

const modelRef = reactive({
  controller: 'controller-1',
  time: '',
  xiangDui: false,
  xiangDuiTime: '',
  xiangDuiTimeDanWei: '分'
})

const rulesRef = reactive({
  controller: [
    {
      required: true,
      message: '请选择控制器'
    }
  ],
  time: [
    {
      required: true,
      message: '请选择时间'
    }
  ],
  xiangDuiTime: [
    {
      required: true,
      message: '请输入相对时间'
    }
  ],
  xiangDuiTimeDanWei: [
    {
      required: true,
      message: '请选择相对时间单位'
    }
  ]
})

const { resetFields, validate, validateInfos, mergeValidateInfo } = useForm(modelRef, rulesRef)
const onSubmit = () => {
  validate()
    .then(() => {
      console.log('定时关机 - 添加关机任务 >>', toRaw(modelRef))
      onCancel()
    })
    .catch(err => {
      console.log('error', err)
    })
}

const onCancel = () => {
  // 触发自定义事件来通知父组件关闭弹窗
  emits('update:visible', false)
}
</script>

<style scoped>
.ant-row {
  margin-bottom: 10px;
}
</style>